

<template>
    <view>
        <view class="border-radio-30 padding-20 bg-white">
            <view class="flex-box fs-28 color-70 type-box margin-b-20">
                <view :class="{'active':(typeIndex==index),'margin-l-20':index  } " @click="getType(index,item)" v-for="(item,index) in typeList" :key="item.id">
                   {{item.name}}
                </view>

            </view>
            <view class="justifyContent-spaceBetween flex-wrap" v-if="list && list.length">
                <view class="margin-b-20 other-list-box  border-radio-14 " v-for="item in list" :key="item.id" @click="goDetails(item)">
                    <view class=" img-box">
                        <image :src="item.image" mode="aspectFill"></image>
                    </view>
                    <view class="color-0 fw-b fs-28 only-1">
                        {{item.title}}
                    </view>
                </view>
            </view>
            <view class="bg-white" v-else style="padding: 100rpx 0">
                <u-empty mode="data"></u-empty>
            </view>
        </view>
    </view>
</template>
<script >

export default {
    props: {
        typeList: {
            type: Array,
            default: () => {
                return []
            }
        },
        list: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            typeIndex:0,
        }
    },
    methods: {
        goDetails(item){
            this.$emit('goDetails',item,this.typeIndex)
        },
        getType(index,item){
            this.$emit('getType',item, )
            this.typeIndex = index;
        },
        initType(){
            this.typeIndex = 0;
        }
    },
}
</script>
<style scoped lang="scss">
@import "common";

</style>